<template>
  <div class="content">
    <div class="cards-container">
      <div
        v-for="(card, index) in cards"
        :key="index"
        class="card-item"
        @click="togglePopup(card)"
      >
        <div class="card-name"></div>
      </div>
    </div>

    <!-- 统计信息弹窗 -->
    <StatisticsPopup
      :visible="statisticsPopupVisible"
      :selected-item="selectedItem"
      @close="closeStatisticsPopup"
      @open-detail="openArticleListPopup"
    />

  
  </div>
</template>

<script>
import { currentPOST } from "api/modules";
import StatisticsPopup from "../components/assess-detail-analysis.vue";

export default {
  name: 'Dashboard',
  components: {
    StatisticsPopup,
  },
  data() {
    return {
      statisticsPopupVisible: false,
      articleListPopupVisible: false,
      selectedItem: {},
      cards: [
        { name: "抖音" },
        { name: "微信视频号" },
        { name: "微博" },
        { name: "今日头条" },
        { name: "微信公众号" },
      ],
    };
  },
  mounted() {
    this.getSummaryData();
  },
  methods: {
    togglePopup(item) {
      console.log(item);
      
      this.selectedItem = item;
      this.statisticsPopupVisible = true;
    },

    getSummaryData() {
      currentPOST("CenterSummaryAssess", {
        beginOfDay: "2025-09-29",
        endOfDay: "2025-10-05",
      })
        .then((res) => {
          if (res.code === 0) {
            this.cards = res.data;
          } else {
            this.$Message({
              text: res.msg,
              type: "warning",
            });
          }
        })
        .catch((error) => {
          console.error("汇总数据请求失败:", error);
        });
    },

    closeStatisticsPopup() {
      this.statisticsPopupVisible = false;
      this.selectedItem = {};
    },

 
  }
}
</script>

<style lang="scss" scoped>
.content {
  margin-top: -20px;
  height: 950px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;

  .cards-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 90%;
    margin-top: 120px;
    
    .card-item {
      width: 300px;
      height: 400px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;

      .card-name {
        color: white;
        font-size: 18px;
        font-weight: bold;
      }
    }
  }
}
</style>